<template>
  <div class="navFooter">
    <div class="logo">
      <img src="/imgs/logo-footer.png" alt="" />
      <p>小米商城</p>
    </div>
    <div class="link">
      <p class="sites">
        <a href="javascript:void(0);">小米商城</a>
        <span class="sep">|</span>
        <a href="javascript:void(0);">MIUI</a>
        <span class="sep">|</span>
        <a href="javascript:void(0);">米家</a>
        <span class="sep">|</span>
        <a href="javascript:void(0);">米聊</a>
        <span class="sep">|</span>
        <a href="javascript:void(0);">多看</a>
        <span class="sep">|</span>
        <a href="javascript:void(0);">游戏</a>
        <span class="sep">|</span>
        <a href="javascript:void(0);">政企服务</a>
        <span class="sep">|</span>
        <a href="javascript:void(0);">小米天猫店</a>
        <span class="sep">|</span>
        <a href="javascript:void(0);">小米商城用户协议</a>
        <span class="sep">|</span>
        <a href="javascript:void(0);">问题反馈</a>
        <span class="sep">|</span>
        <a href="javascript:void(0);">Select Location</a>
      </p>
    </div>
    <div class="slogan">探索黑科技 <span>小米</span> 为发烧而生</div>
  </div>
</template>

<script>
export default {
  name: 'nav-footer',
}
</script>

<style lang="scss">
.navFooter {
  margin-top: 20px;
  width: 100%;
  background-color: #333;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  color: #999;
  border-top: 3px solid #ff6600;
  box-sizing: border-box;

  .logo {
    text-align: center;

    p {
      margin-top: 20px;
    }
  }

  a {
    display: inline-block;
    color: #999;
    margin: 20px 10px;
  }
  .slogan {
    span {
      font-size: 18px;
      color: coral;
      margin: 0 20px;
    }
  }
}
</style>
